<template>
  <a-form-model layout="horizontal">
    <a-row>
      <a-col
        :md="24 / option.num"
        :sm="24"
        :key="index"
        v-show="index < advancedIndex"
        v-for="(item, index) in option.config"
      >
        <a-form-model-item
          :label="item.title"
          :labelCol="{ span: option.labelCol ? option.labelCol : 8 }"
          :wrapperCol="{
            span: option.wrapperCol ? option.wrapperCol : 16,
            offset: 0,
          }"
        >
          <a-input
            :placeholder="item.placeholder"
            v-if="item.type == 'text'"
            v-model="item.value"
            allow-clear
          />

          <a-select
            :placeholder="item.placeholder"
            allow-clear
            v-model="item.value"
            v-if="item.type == 'bool'"
          >
            <a-select-option value="1"> 是 </a-select-option>
            <a-select-option value="0"> 否 </a-select-option>
          </a-select>

          <a-date-picker
            :placeholder="item.placeholder"
            :format="item.format"
            allow-clear
            v-model="item.value"
            v-if="item.type == 'datetime'"
            style="width: 100%"
          />
          <a-month-picker
            :placeholder="item.placeholder"
            :format="item.format"
            allow-clear
            v-model="item.value"
            v-if="item.type == 'datemonth'"
            style="width: 100%"
          />
          <a-select
            :placeholder="item.placeholder"
            allow-clear
            v-model="item.value"
            v-if="item.type == 'select'"
          >
            <a-select-option
              v-for="(sitem, sindex) in item.source.format"
              :key="sindex"
              :value="sitem.key"
            >
              {{ sitem.value }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <div
        v-if="option.config.length > 0"
        class="ant-col ant-col-sm-24"
        :class="'ant-col-md-' + 24 / option.num"
      >
        <div class="ant-row ant-form-item" style="line-height: 40px">
          <div class="ant-col ant-col-8 ant-form-item-label"></div>
          <div class="ant-col ant-col-16 ant-form-item-control-wrapper">
            <a-space>
              <a-button type="primary" @click="search">查询</a-button>
              <a-button @click="reset">重置</a-button>
              <a-tooltip>
                <template slot="title">
                  {{ advanced ? "收起" : "展开" }}
                </template>
                <a
                  @click="toggleAdvanced"
                  style="margin-left: 8px"
                  v-if="(option.config.length + 1) / option.num > 1"
                >
                  <a-icon :type="advanced ? 'up' : 'down'" />
                </a>
              </a-tooltip>
            </a-space>
          </div>
        </div>
      </div>
    </a-row>
  </a-form-model>
</template>

<script>
import moment from "moment";
export default {
  name: "eip-search",
  data() {
    return {
      advanced: false,
      advancedIndex: this.option.config.length,
    };
  },
  props: {
    option: {
      type: Object,
      default: {
        labelCol: 8,
        wrapperCol: 16,
        num: 6,
        config: [],
      },
    },
  },
  created() {
    this.toggleAdvanced();
  },
  methods: {
    /**
     * 关闭
     */
    toggleAdvanced() {
      this.advancedIndex = this.advanced
        ? this.option.num - 1
        : this.option.config.length;
      this.advanced = !this.advanced;
      this.$emit("advanced", this.advanced);
    },
    /**
     * 重置
     */
    reset() {
      this.option.config.forEach((element) => {
        element.value = "";
      });
      this.search();
    },

    /**
     * 查询
     */
    search() {
      //组装格式
      let rules = "";
      this.option.config.forEach((element) => {
        var searchField = element.field,
          searchOper = element.op,
          searchString = element.value;
        if (searchField && searchOper && searchString) {
          if (element.type == "datetime") {
            searchString = moment(searchString).format(element.format);
          }
          if (element.type == "datemonth") {
            searchString = moment(searchString).format(element.format) + "-01";
          }

          rules +=
            ',{"field":"' +
            searchField +
            '","op":"' +
            searchOper +
            '","data":"' +
            searchString +
            '"}';
        }
      });
      rules && (rules = rules.slice(1));
      let filtersStr = '{"groupOp":"AND","rules":[' + rules + "]}";
      this.$emit("search", filtersStr);
    },
  },
};
</script>

<style lang="less" scoped>
.ant-form-item {
  margin-bottom: 0;
}
</style>
